<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页实例</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
a{text-decoration: none;}
#app{width:800px;margin:60px auto;}
.pagination{ width:100%;}
.pagination li{width:40px;height:40px;line-height: 40px;border:1px solid #ccc; display: inline-block;text-align: center;}
.active {border:1px solid green; background-color: green; }
.active a{color:#fff;}
    </style>
</head>
<body>
<div id="app">
    <ul class="pagination">
        <li v-for="(n,index) in pageCount" :class="currentPage==n?'active':''" @click="goPage(index+1)" >
            <a href="javascript:void(0)">{{n}}</a>
        </li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            currentPage:1,
            pageCount:10
        },
        methods:{
            goPage:function (index) {
                if(index!==this.currentPage){
                    this.currentPage=index;
                }
            }
        }
    })
 </script>
</body>
</html>